<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>h5 in mp</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,body {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%
			}

			#jump {
				width: 300px;
				line-height: 50px;
				height: 50px;
				background-color: blue;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="jump">
			jump
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script type="text/javascript">
			$('#jump').click(function() {
				if (window.__wxjs_environment != 'miniprogram') {
					throw 'h5 isnt in mp';
				}

				wx.miniProgram.navigateTo({
					url: '/pages/jump/jump'
				})
			});

			function ready() {
				console.log(`h5 is in mp: ${window.__wxjs_environment === 'miniprogram'}`); // true
			}

			if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
				document.addEventListener('WeixinJSBridgeReady', ready, false)
			} else {
				ready()
			}
		</script>
	</body>
</html>
